<nz-layout>
  <nz-header>
    <h3 class="logo">{{ appTitle$ | async }}</h3>
  </nz-header>
  <nz-content>
    <div class="container mt-4">
      <div>
        @if (progress.total <= 0) {
          <nz-alert nzType="warning" nzMessage="还没到签到时间" nzShowIcon />
        } @else if (progress.percent >= 100) {
          <nz-alert nzType="success" nzMessage="签到完成" nzShowIcon />
        } @else {
          <nz-alert nzType="info" [nzMessage]="message" />
          <ng-template #message>
            <nz-flex nzGap="large" nzJustify="space-between">
            <span>
              <span>总数:</span><span class="progress-number">{{ progress.total }}</span>
            </span>
              <span>
              <span>已完成:</span><span class="progress-number">{{ progress.done }}</span>
            </span>
              <span>
              <span>未完成:</span><span class="progress-number">{{ progress.undone }}</span>
            </span>
            </nz-flex>
          </ng-template>
        }
      </div>
      <div class="mt-4" nz-flex nzGap="large">
        <img
          src="/assets/images/card-photo.jpg"
          style="width: 102px; height: 126px"
          alt="照片"
          class="img img-thumbnail"
        />
        <div style="flex-grow: 1">
          <form nz-form nzLayout="horizontal">
            <nz-form-item nzRequired>
              <nz-form-label nzFor="name" nzSpan="8">身份证号</nz-form-label>
              <nz-form-control>
                <input
                  nz-input
                  name="idNumber"
                  [(ngModel)]="signInfo.idNumber"
                  placeholder="请刷卡或输入身份证号"
                  (input)="handleInputCard()"
                  (keydown.enter)="handleEnterCard()"
                  [nzAutocomplete]="idNumberAuto"
                />
                <nz-autocomplete
                  #idNumberAuto
                  [nzDataSource]="idNumberAutoSource"
                ></nz-autocomplete>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label nzFor="name" nzSpan="8">姓名</nz-form-label>
              <nz-form-control>
                <input
                  nz-input
                  [ngModel]="signInfo.personName"
                  [disabled]="true"
                  name="personName"
                />
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label nzFor="name" nzSpan="8">刷卡时间</nz-form-label>
              <nz-form-control>
                <input
                  nz-input
                  [ngModel]="signInfo.recordTime"
                  [disabled]="true"
                  name="recordTime"
                />
              </nz-form-control>
            </nz-form-item>
          </form>
        </div>
      </div>
    </div>
  </nz-content>
  <nz-footer class="text-center">Footer</nz-footer>
</nz-layout>
